import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 开启严格模式
  strict: true,
  // vuex里放数据的地方
  state: {
    count: 3,
    age: 16,
    // 购物车数据
    cartList: []
  },

  // vuex里放计算属性的地方
  getters: {
    // 它的写法跟以前的写法还是一样的
    totalPrice (state) {

      return state.cartList.reduce( (sum, v) =>  sum += v.price , 0)
    }
  },

  // vuex里放方法的地方 -- 也是唯一允许修改state的地方
  mutations: {
    // 参数1：固定的state -- 就是拿到当前对象里的state
    addCount (state) {
      state.count++
    },
    // 希望外界传几这里就加几
    // mutations的方法里可以接收一个额外的参数，放在参数2
    addWithNum (state, num) {
      state.count += num
    },

    // mutations里的方法最多只能接收一个额外的参数
    // 所以即使你写两个也没用
    // test (state, num1, num2) {
    //   console.log(num1, num2) // 5 undefined
    // }
    // 如果我非要传多个参数，就把多个数据存到一个对象里
    // 这里传递对象即可
    test (state, obj) {
      console.log(obj) //
    },

    // mutations里是放同步代码
    setCartList (state, list) {

      state.cartList = list
    }
  },

  // 放方法的地方 -- 但是方法里可以写异步代码
  actions: {
    // 参数1：context，也可以简写为ctx，是当前store对象
    reqCartList (ctx) {
      // 发请求
      setTimeout(() => {
        // 假设这是服务器返回的数组
        let list = [
          { id: 1, name: '皮鞋', price: 9.9 },
          { id: 2, name: '凉鞋', price: 7699 },
          { id: 3, name: '外套', price: 2399 },
          { id: 4, name: '斜挎包', price: 17900 }
        ]
        ctx.commit('setCartList', list)
      }, 1000)
    },

    // actions跟mutations一样也可以最多接收1个额外参数
    reqFn (ctx, obj) {
      console.log(obj)
    }
  },
  modules: {}
})
